<html>
<head>
<title>Budget</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>	
<link rel="stylesheet" type="text/css" media="all" href="../static/css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="../static/metro/css/m-styles.min.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<script src="../static/metro/js/m-dropdown.min.js"></script>
<script src="../static/metro/js/m-radio.min.js"></script>
<link href="../static/metro/css/m-styles.min.css" rel="stylesheet">

<script src="../static/javascripts/utils.js"></script>

<style>
*{
	font-family: 'Open Sans', sans-serif;
}
div#header{
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	background: #4c8efb;
	/*position: fixed;*/
	width: 100%;
	z-index: 100;
}
h1{
}
.menu_button{
	width: 75%;
}
#footer{
	padding-top: 2em;
}
</style>
<script>

$(document).ready(function(){
    $.post('/action/request_login_data', function(response){
        if(response.logged_in == true){
            $('div#menu_login').hide();
            SetUsername(response.user);
        }
    });
}); 


function Login(){
	var $username = $('input#username');
	var $password = $('input#password');
	var username = $username.val();
	var password = $password.val();
	
	if(!ValidateLogin(username, password)){
		$username.css("background-color", "#FFFF9C");
		$password.css("background-color", "#FFFF9C");
		console.log('Login invalid');
		return;
	}
	
	$.post('/action/login', {username:username, password:password}, function(result){
		if(result.success==true){
			// Have to redirect from here because server can't redirect from a POST
			window.location = '/view/home';
            SetUsername(username);
		}
		else{
			console.log('Login Unsuccessful');
			$('#login_response').html('Login unsuccessful');
			$username.css("background-color", "#FF9c9c");
			$password.css("background-color", "#FF9c9c");
		}
	}, 'JSON');
	return false;
}

function SetUsername(name){
    $('a#username').html(name);
}

function Register(){
	var $username = $('input#username');
	var $password = $('input#password');
	var username = $username.val();
	var password = $password.val();
	
	if(!ValidateLogin()){
		return;
	}
	$.post('/register', {username:username, password:password}, function(result){
		console.log('Register response:');
		console.log(result);
	}, 'json');
}

function ValidateLogin(username, password){
	if(username.length==0 || password.length==0){
		return false;
	}
	return true;
}
</script>
</head>

<body>
<div id='header'>
	<div class='container_12'>
		<div class='grid_6'>
			<h1>Budgeting Service</h1>
		</div>
	</div>
</div>

<div class='container_12'>
	<div id='menu' class='grid_3'>
		<a href='/view/home' class='m-btn red-stripe menu_button'>Home</a>
		<br />
		<a href='/view/new_budget' class='m-btn green-stripe menu_button'>New Budget</a>
		<br />
		<a href='/view/view_budgets' class='m-btn purple-stripe menu_button'>View Budgets</a>
		<br />
		<br />
		<br />
        <div id='menu_login'>
            Username: <input id="username" type='text' style='width: 6em' value='nate'/>
            Password: <input id="password" type='text' style='width: 6em' value='password'/>
            <div class='m-btn-group'>
                <a href='#' class='m-btn' onclick='Login()' style='width: 68px'>Login</a>
                <a href='#' class='m-btn disabled' style='width: 68px'>Register</a>
            </div>
        </div>
	</div>

	<div id='content' class='grid_9'>
	</div>
	
	<div class='clear'>
	</div>

	<div id='footer' class='m-btn-group'>
		<a href='#' class='m-btn'>About</a>
		<a href='#' class='m-btn'>Contact</a>
		<a href='#' class='m-btn disabled' id="username"> </a>
		<a href='#' class='m-btn disabled'>Made by Nathaniel Hatch-Stevens, 2013</a>
	</div>
</body>
</html>